<template>
	<view class="evaluateWtapper">
		<view class="evaluateItem" v-for="(item,index) in list" :key="index">
			<view class="pic-text acea-row row-middle">
				<view class="pic">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="acea-row row-middle">
					<view class="name line1">{{item.nickname}}</view>
					<view :class="'start star'+ item.star"></view>
				</view>
			</view>
			<view class="time">{{item.add_time}}</view>
			<view class="evaluate-infor">{{item.comment}}</view>
			<view class="imgList acea-row">
				<view class="pic" v-for="(pic,idx) in item.pics" :key="idx"><image :src="pic" mode=""></image></view>
			</view>
			<view class="reply" v-if="item.merchant_reply_content">
				<text>店小二</text>
				:{{item.merchant_reply_content}}
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../api/api.js";
	export default{
		props:{
			evaluationData:{
				type:Array,
			}
		},
		data(){
			return{
				list:[]
			}
		},
		watch:{
			evaluationData:function(e){
				console.log(e)
				this.list = e;
			}
		},
		methods:{
			init:function(){
				let goodsId = this.goodsId;
			}
		}
	}
</script>

<style scoped> 
	.start{width: 122rpx; height: 30rpx;background-image:url('');background-repeat: no-repeat; background-size: 122rpx auto;}
	.evaluateWtapper .evaluateItem{
		background-color: #fff;
		padding-bottom: 25rpx;
	}
	.evaluateWtapper .evaluateItem .pic-text{
		font-size: 26rpx;
		color: #282828;
		height: 95rpx;
		padding: 0 30rpx;
	}
	.evaluateWtapper .evaluateItem .pic-text .pic{
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}
	.evaluateWtapper .evaluateItem .pic-text .pic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.evaluateWtapper .evaluateItem .pic-text .acea-row .name{
		max-width: 450rpx;
		margin-right: 15rpx;
	}
	.evaluateWtapper .evaluateItem .time{
		font-size: 24rpx;
		color: #82848f;
		padding: 0 30rpx;
	}
	.evaluateWtapper .evaluateItem .evaluate-infor{
		font-size: 28rpx;
		color: #282828;
		margin-top: 19rpx;
		padding: 0 30rpx;
	}
	.evaluateWtapper .evaluateItem .imgList{
		padding: 0 30rpx 0 15rpx;
		margin-top: 25rpx;
	}
	.evaluateWtapper .evaluateItem .imgList .pic{
		width: 156rpx;
		height: 156rpx;
		margin: 0 0 15rpx 15rpx;
	}
	.evaluateWtapper .evaluateItem .reply{
		font-size: 26rpx;
		color: #454545;
		background-color: #f7f7f7;
		border-radius: 5rpx;
		margin: 20rpx 30rpx 0 30rpx;
		padding: 30rpx;
		position: relative;
	}
	.evaluateWtapper .evaluateItem .reply::before{
		content: "";
		width: 0;
		height: 0;
		border-left: 0.3rem solid transparent;
		border-right: 0.3rem solid transparent;
		border-bottom: 0.4rem solid #f7f7f7;
		position: absolute;
		top: -0.4rem;
		left: 2rem;
	}
	.evaluateWtapper .evaluateItem .reply text{
		color: #fc4141!important;
	}
	.start.star5{background-position: 0 3rpx;}
	.start.star4{background-position: 0 -30rpx;}
	.start.star3{background-position: 0 -70rpx;}
	.start.star2{background-position: 0 -105rpx;}
	.start.star1{background-position: 0 -140rpx;}
	.start.star0{background-position: 0 -175rpx;}
</style>
